<template>
	<view class="viewport">
	  <!-- 推荐封面 -->
	  <view class="cover">
		<image
		  :src="bannerPicture"
		/>
	  </view>
	  <!-- tab栏 -->
	  <view class="tabs">
		<text class="text " @click="activeId=item.id"  :class="{ active: activeId === item.id }" v-for="item in subTypes" :key="item.id"> {{ item.title }} </text>
	
	  </view>
	  <!-- 列表内容 -->
	  <scroll-view
      scroll-y
      class="scroll-view"
	  v-for="(item,id) in goodsItems"
	  :key="id"
	  v-show="id === activeId"
	  @scrolltolower="onScrolltolower"

    >
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in item.items"
          :key="goods.id"
          :url="`/pages/goods/index?id=${goods.id}`"
        >
          <image class="thumb" :src="goods.picture"></image>
          <view class="name ellipsis">{{ goods.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goods.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="loading">正在加载...</view>
    </scroll-view>
	</view>
  </template>

  <script setup>
import { onLoad } from '@dcloudio/uni-app';
  import request from '@/utils/http'
import { ref,computed } from "vue";
const bannerPicture =ref('')// 背景图片
const subTypes =ref([])// 商品title
  const goodsItems = ref({})// 商品列表
 const activeId = ref('') // title 高亮


 const urlMap = {
1: { title: "特惠推荐", url: "/home/preference/mutli" },
2: { title: "爆款推荐", url: "/home/inVogue/mutli" },
3: { title: "一站买全", url: "/home/oneStop/mutli" },
4: { title: "新鲜好物", url: "/home/new/mutli" }
  };
	 let type = -1
  onLoad(async (aps) => {
	type=aps.type
	 uni.setNavigationBarTitle({ title: urlMap[type].title })
	const { result } = await request({ url: urlMap[type].url })
	bannerPicture.value=result.bannerPicture
	subTypes.value=result.subTypes
	goodsItems.value=result.goodsItems
	activeId.value=result.subTypes[0].id	  
  })
//   使用计算属性
  const computedData = computed(()=> {
	return goodsItems.value[activeId.value]
 })
  const onScrolltolower = async() =>{
  	  if (computedData.value.page >= computedData.value.pages) {
		 uni.showToast({ title: "没有更多数据啦", icon: "none" })
		return
  	  }
  	  const opents = {
  			  url: urlMap[type].url,
  			  data: {
  					  page: computedData.value.page + 1,
  					  pageSize: 10,
					  subType:activeId.value
			  }
	  }
  	  const { result } = await request(opents)
	
  	  goodsItems.value[activeId.value].page++

		goodsItems.value[activeId.value].items =[...goodsItems.value[activeId.value].items,...result.goodsItems[activeId.value].items]
		
  }

  
  </script>
  
  <style lang="scss">
  page {
	height: 100%;
	background-color: #f4f4f4;
  }
  .viewport {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 180rpx 0 0;
	position: relative;
  }
  .cover {
	width: 750rpx;
	height: 225rpx;
	border-radius: 0 0 40rpx 40rpx;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
  }
  .tabs {
	display: flex;
	justify-content: space-evenly;
	height: 100rpx;
	line-height: 90rpx;
	margin: 0 20rpx;
	font-size: 28rpx;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
	color: #333;
	background-color: #fff;
	position: relative;
	z-index: 9;
	.text {
	  margin: 0 20rpx;
	  position: relative;
	}
	.active {
	  &::after {
		content: "";
		width: 40rpx;
		height: 4rpx;
		transform: translate(-50%);
		background-color: #27ba9b;
		position: absolute;
		left: 50%;
		bottom: 24rpx;
	  }
	}
  }
  .scroll-view {
	flex: 1;
	overflow: hidden;
  }
  .goods {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx 20rpx;
	.navigator {
	  width: 345rpx;
	  padding: 20rpx;
	  margin-top: 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	}
	.thumb {
	  width: 305rpx;
	  height: 305rpx;
	}
	.name {
	  height: 88rpx;
	  font-size: 26rpx;
	}
	.price {
	  line-height: 1;
	  color: #cf4444;
	  font-size: 30rpx;
	}
  }
  .goods .symbol,
  .goods .decimal {
	font-size: 70%;
  }
  </style>